<!-- 书城 -->

<template>
  <div class="find">
    <div class="head">
      <div><i class="icon-price"/>
        <countup :start-val="0" :end-val="student.gold_coin" :duration="2"></countup>
      </div>
      <div><i class="icon-count"/>
        <countup :start-val="0" :end-val="student.word_count" :duration="2"></countup>
      </div>
    </div>
    <mt-loadmore v-if="pageInfo.hasMore" :top-method="loadTop" :bottom-method="loadBottom" ref="loadmore">
      <book-item-city v-for="book of books" :key="book.name" :book="book"/>
    </mt-loadmore>
    <div v-else>
      <book-item-city v-for="book of books" :key="book.name" :book="book"/>
    </div>
    <transition name="slide">
      <Sift v-show="showSift" @back="goBack"/>
    </transition>
        <transition name="slide">
      <BindPhone v-show="showBindPhone" @back="nextStep" />
    </transition>
    <tab-bar></tab-bar>
  </div>
</template>

<script>
import TabBar from "@/components/base/tab-bar/tab-bar";
import BookItemCity from "@/components/base/book-item-city/book-item-city";
import BindPhone from "@/components/login/bind-phone";
import Sift from "@/components/sift/sift";
import { mapGetters, mapMutations } from "vuex";
import { Countup } from "vux";

export default {
  components: {
    TabBar,
    BookItemCity,
    Sift,
    Countup,
    BindPhone
  },
  data() {
    return {
      books: [],
      pageInfo: {
        currentPage: 0,
        hasMore: false
      },
      showBindPhone: false,
      showSift: false,
      showLoading: false
    };
  },
  props: {},
  watch: {},
  methods: {
    nextStep() {
      this.showBindPhone = false;
      this.queryDefaultStudent();
    },
    queryDefaultStudent() {
      //查询默认学生，如果没有则弹出新增学生页，如果有则更新缓存(避免用户清掉缓存这里最好每次进来都重新查询)
      this.$$api_user_query_default_student({
        data: this.userID,
        fn: res => {
          if (!res) {
            this.showSift = true;
          } else {
            // 更新完缓存后进行初始化列表数据
            this.$store
              .dispatch("update_default_student", res)
              .then(result => this._initIndexListData(true));
          }
        }
      });
    },
    loadBottom() {
      this.$refs.loadmore.onBottomLoaded();
      if (this.pageInfo.hasMore) this._initIndexListData();
    },
    loadTop() {
      this.$refs.loadmore.onTopLoaded();
      this._initIndexListData(true);
    },
    goMore(id) {
      this.$router.push(`/product_list/${id}`);
    },
    // 初始化列表数据
    _initIndexListData(isInit) {
      if (!!this.showLoading) return;
      this.showLoading = true;
      this.$$api_book_articleList({
        data: {
          page: this.pageInfo,
          currentPage: isInit
            ? (this.pageInfo.currentPage = 0)
            : (this.pageInfo.currentPage += 1),
          class: this.student.class
        },
        fn: res => {
          this.books = isInit ? res : [...this.books, ...res];
          this.$nextTick(() => (this.showLoading = false));
          //查询该学生阅读书籍所获得的金币
          this.$$api_book_student_book_gold({
            data: this.student.id,
            fn: res => {
              this.books = this.books.map(item => {
                const book = res.filter(book_ => book_.book_id == item.id);
                return !!book.length
                  ? { ...item, get_gold_coin: book[0].gold }
                  : { ...item, get_gold_coin: 0 };
              });
            }
          });
        }
      });
    },
    ...mapMutations(["IS_INIT"]),
    goBack() {
      this.showSift = false;
      this._initIndexListData(true);
    }
  },
  filters: {},
  computed: {
    ...mapGetters(["userID", "isInit", "student"])
  },
  created() {
    console.log("userID", "isInit", "student",this.userID, this.isInit, this.student);
    if (this.isInit) return this._initIndexListData(true);
    setTimeout(() => {
      this.IS_INIT(true);
      this.showBindPhone = true;
    }, 1500);
  },
  mounted() {},
  destroyed() {}
};
</script>

<style lang="scss" scoped>
@import "~@/assets/scss/const.scss";
@import "~@/assets/scss/mixin.scss";

.find {
  background: $app-background-color;
  padding-top: 42px;
  padding-bottom: 50px;
  .head {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 42px;
    width: 100%;
    background: $app-background-color;
    position: fixed;
    top: 0;
    left: 0;
    border-bottom: 1px solid lightgray;
    > div {
      i {
        font-size: 18px;
        margin-right: 5px;
      }
      flex: 1;
      line-height: 42px;
      text-align: center;
    }
  }
}
.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s linear;
}
.slide-enter,
.slide-leave-to {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
</style>
